/* icons为预先准备好的图标100个
 size为每页显示的个数
 page是显示的总页数 向上取整(一个也会占一页)
 pagerCount为要显示的数字按钮的个数 */
 const icons =[
    {"id":"1","count":1,
        "price": "\n                                                                    ￥1498\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/ik1176 (3).png",
        "title": "【新品】罗技iK1095键盘保护套 适用于 iPad Air（第四代）"
    },
    {"id":"2","count":1,
        "price": "\n                                                                    ￥1498\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/ik1176 (3).png",
        "title": "罗技iK1176键盘保护套 适用于 11 英寸 iPad Pro（第一、二、三代）"
    },
    {"id":"3","count":1,
        "price": "\n                                                                    ￥1698\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-08-02/NEW_XL/1.png",
        "title": "罗技iK1275键盘保护套 适用于 12.9 英寸 iPad Pro（第五代）"
    },
    {"id":"4","count":1,
        "price": "\n                                                                    ￥1899\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2021-04-06/NEW_XL/K860.png",
        "title": "罗技 ERGO K860人体工学分体式键盘"
    },
    {"id":"5","count":1,
        "price": "\n                                                                    ￥1599\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-12-08/NEW_XL/002.png",
        "title": "罗技Folio Touch ik1094键盘保护套"
    },
    {"id":"6","count":1,
        "price": "\n                                                                    ￥1599\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-11-27/NEW_XL/01 (1).png",
        "title": "罗技FolioTouch IK1175背光键盘保护套,适配11英寸iPad Pro(第一、二代)"
    },
    {"id":"7","count":1,
        "price": "\n                                                                    ￥1399\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-09-01/NEW_XL/01-1.png",
        "title": "罗技 Combo Touch键盘保护套（适配iPad第七代）"
    },
    {"id":"8","count":1,
        "price": "\n                                                                    ￥1399\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-09-01/NEW_XL/05.png",
        "title": "罗技 Combo Touch键盘保护套【适配iPad Air第三代和10.5英寸iPad Pro】"
    },
    {"id":"9","count":1,
        "price": "\n                                                                    ￥1099\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-08-11/NEW_XL/01.png",
        "title": "罗技 SLIM FOLIO PRO iK1274集成蓝牙键盘保护套"
    },
    {"id":"10","count":1,
        "price": "\n                                                                    ￥1229\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/k380可妮兔-01-min.png",
        "title": "罗技 K380多设备蓝牙键盘LINE FRIENDS 可妮兔【限量送李易峰充电宝】"
    },
    {"id":"11","count":1,
        "price": "\n                                                                    ￥1229\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/k380布朗熊-02-min.png",
        "title": "罗技 K380多设备蓝牙键盘LINE FRIENDS 布朗熊【限量送李易峰充电宝】"
    },
    {"id":"12","count":1,
        "price": "\n                                                                    ￥1799\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/Slim-Folio-iPad-Air-键盘保护套-01.png",
        "title": "罗技 Slim Folio iPad键盘保护套 【ik1055BK iPad键盘保护套】"
    },
    {"id":"13","count":1,
        "price": "\n                                                                    ￥1799\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/Slim-Folio-iPad-01 .png",
        "title": "罗技 Slim Folio iPad Air 键盘保护套"
    },
    {"id":"14","count":1,
        "price": "\n                                                                    ￥1229\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/K380白-01-min.png",
        "title": "罗技 K380蓝牙键盘 芍药白【限量送李易峰充电宝】"
    },
    {"id":"15","count":1,
        "price": "\n                                                                    ￥1229\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2020-07-29/NEW_XL/K380粉-01-min.png",
        "title": "罗技 K380蓝牙键盘 茱萸粉【限量送李易峰充电宝】"
    },
    {"id":"16","count":1,
        "price": "\n                                                                    ￥1699\n                                                                ",
        "src": "https://images.wincheers.net/UpLoad/Web/ProductImg/2019-02-15/NEW_XL/ik1053-01.png",
        "title": "罗技 iK1053 键盘保护套【iK1052升级版，不含笔】"
    }
],
size = 8,
page = Math.ceil(icons.length / size),
pagerCount = 6;

// 当前选中的页数
let current = 1;

// 显示内容列表
const _content = document.querySelector(".content");
this.ul=document.querySelector(".productList-list-ul")
const showContent = () => {
// 每次遍历新内容 首先清空
this.ul.innerHTML = "";
icons.forEach((item, index) => {
    // 遍历计算方法 当前为第1页 一页10个 第一页的数据就是 0 - 10(不包含) 第二页为 10 - 20(不包含) 以此类推
    if (index >= (current - 1) * size && index < current * size) {
        // 每遍历一个创建一个li元素
        const li = document.createElement("li");
        // li元素添加内容
        li.innerHTML = `<li class="list" count=${item.count}>
        <div class="list-box" idd=${item.id}>
            <p class="p-img">
                    <a href="javascript:void(0);" >
                        <img src="../static/images/blank.gif" alt="罗技 Slim Folio iPad Air 键盘保护套" data-echo="${item.src}">
                    </a>
            </p>
            <p class="p-name">
                <a href="javascript:void(0);" title="罗技 Slim Folio iPad Air 键盘保护套">${item.title}</a>
            </p>
            <p class="p-price-comment">
                    <span class="price">
                        商城价
                            <strong>
                                ${item.price}
                            </strong>
                    </span>
                    <span class="comment">0 评价</span>
            </p>
            <p class="p-tool" id=${item.id}>
                            <a class="p-tool-btn no" href="javascript:void(0)" >加入购物车</a>
            </p>
        </div>
    </li>`
        
        // 添加到列表元素中
        
        this.ul.appendChild(li);
        
    }
});

};

// 创建分页列表
const _pagination = document.querySelector(".pagination");
const createPagination = () => {
showContent();

// 刚开始就要有左按钮
// 当前页数不为1就为可点击态
let lis = `
<li class="material-icons page-btn page-btn-prev ${
    current !== 1 ? "isClick" : ""
}">
  keyboard_arrow_left
</li>`;

if (current < 1 || current > page) {
    throw `current 参数最小值为1 最大值为${page}`;
    // 当当前页数小于1或者大于总页数了就抛出错误
} else if (pagerCount < 5) {
    throw "pagerCount 参数最小值为5";
    // 小于5 分页无意义
} else if (page <= pagerCount) {
    // 如果总页数小于了要显示的数字按钮个数 就直接遍历了 不需要显示省略按钮
    for (let i = 1; i <= page; i++) {
        lis += `<li class="page-number ${
            i == current ? "active" : ""
        }">${i}</li>`;
    }
} else {
    // 定义两个参数
    // 用来保存当前选中分页前后的显示数字按钮(不包括省略前后的和选中的) 刚好是以下计算方法
    // 有问题 pagerCount 为偶数 显示小数点 将beforeNumber向下取整就可以了
    let beforeNumber = Math.floor(current - (pagerCount - 3) / 2),
        afterNumber = current + (pagerCount - 3) / 2;
    // 显示左省略按钮
    if (current >= pagerCount - 1) {
        lis += `<li class="page-number">1</li>
        <li class="material-icons page-dot page-dot-prev"></li>`;
    }
    // 提出问题: 选中页数为1 显示了0
    // 解决 当页数为1 将beforeNumber改为1 afterNumber为除去省略号后面的一个按钮
    // 同理解决current == page
    // 又有问题 点击前三个应该不分页 到 4(针对pagerCount参数来说) 了该分页 同理求得current == page
    if (current >= 1 && current < pagerCount - 1) {
        beforeNumber = 1;
        afterNumber = pagerCount - 1;
    } else if (current <= page && current > page - (pagerCount - 2)) {
        beforeNumber = page - (pagerCount - 2);
        afterNumber = page;
    }

    for (let i = beforeNumber; i <= afterNumber; i++) {
        lis += `<li class="page-number ${
            i == current ? "active" : ""
        }">${i}</li>`;
    }
}
// 显示右省略按钮
if (current <= page - (pagerCount - 2)) {
    lis += `
    <li class="material-icons page-dot page-dot-next"></li>
    <li class="page-number">${page}</li>`;
}

// 最后拼接右按钮
// 当前页数不是总页数就为可点击态
lis += `
<li class="material-icons page-btn page-btn-next ${
    current !== page ? "isClick" : ""
}">
  keyboard_arrow_right
</li>`;
_pagination.innerHTML = lis;

// OK 分页已经没问题了 改变参数均没问题 随意修改

// 点击数字按钮
const _pageNumbers = document.querySelectorAll(".page-number");
_pageNumbers.forEach((item) => {
    item.addEventListener("click", () => {
        // item.innerHTML为字符串 需要转为数字
        current = parseInt(item.innerHTML);
        createPagination();
        Echo.init({
            offset:0,
            throttle:1000
        })
    });
});

// 下一页
const _pageBtnNext = document.querySelector(".page-btn-next");
_pageBtnNext.addEventListener("click", () => {
    if (current !== page) {
        current++;
        createPagination();
    }
});

// 上一页
const _pageBtnPrev = document.querySelector(".page-btn-prev");
_pageBtnPrev.addEventListener("click", () => {
    if (current !== 1) {
        current--;
        createPagination();
    }
});

// 前进 pagerCount - 2 格
const _pageDotNext = document.querySelector(".page-dot-next");
// 因为省略按钮会时隐时现 直接绑定会报找不到元素错误
// ?. 就可以了 只有元素存在再去绑定后面的事件
_pageDotNext?.addEventListener("click", () => {
    current += pagerCount - 2;
    createPagination();
});

// 后退 pagerCount - 2 格
const _pageDotPrev = document.querySelector(".page-dot-prev");
_pageDotPrev?.addEventListener("click", () => {
    current -= pagerCount - 2;
    createPagination();
});
};
createPagination();

